<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>手机产品分类页</title>
		<link rel="stylesheet" href="../css/reset.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/selector.css" />
		<link rel="stylesheet" href="../css/test4.css" />
		<script type="text/javascript" src="../js/luoBoTu.js" ></script>
	</head>
	<body>
		<div class="head">
			<div class="top-first">
				<div class="comWidth">
					<div class="leftArea">
						<a href="#" class="collection">商城首页</a>
					</div>
					<div class="rightArea welcome">
						<span>欢迎您来到数码商城！</span>
						<a href="#">[登录]</a>
						<a href="#">[注册]</a>
					</div>
				</div>
			</div>
			<div class="top-second">
				<div class="comWidth">
					<div class="logo fl">
						<a href="#" ><img src="../img/logo.png"/></a>
					</div>
					<div class="search fl">
						<input type="text" class="search-text fl" placeholder="请输入商品名称">
						<input type="button" class="search-btn fl" value="搜	索"/>
					</div>
					<div class="shopCart fl">
						<i class="ci-left"></i>
						<i class="ci-right">></i>
						<i class="ci-count" id="shopping-amount">0</i>
						<a target="_blank" href="#" class="">我的购物车</a>
					</div>
				</div>
			</div>
			<div class="top-third">
				<div class="comWidth">
					<div id="category" class="dorpdown">
						<div class="dt">全部分类</div>
					</div>
					<div class="navitems">
						<ul>
							<li>
								<a target="_blank" href="#" class="nav-color">首页</a>
							</li>
							<li>
								<a target="_blank" href="#">数码城</a>
							</li>
							<li>
								<a target="_blank" href="#">团购</a>
							</li>
							<li>
								<a target="_blank" href="#">发现</a>
							</li>
							<li>
								<a target="_blank" href="#">二手特卖</a>
							</li>
							<li>
								<a target="_blank" href="#">名品会</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<br /><br />
		
		<div id="J_selector" class="selector comWidth1">
				<div class="J_selectorLine s-brand">
					<div class="fl flArea">
						<span>品牌：</span>
					</div>
					<div class="fr frArea">
						<ul class="brand-ul">
							<li>
								<a href="#" alt="1" title="华为（HUAWEI）" rel="nofollow"><img src="img/brand/HuaWei-logo.jpg" width="102" height="36"/>华为（HUAWEI）</a>
							</li>
							<li>
								<a href="#" alt="2" title="小米（MI）" rel="nofollow"><img src="img/brand/XiaoMi-logo.jpg" />小米（MI）</a>
							</li>
							<li>
								<a href="#" alt="3" title="三星（SAMSUNG）" rel="nofollow"><img src="img/brand/samsung-logo.jpg" />三星（SAMSUNG）</a>
							</li>
							<li>
								<a href="#" alt="4" title="魅族（MEIZU）" rel="nofollow"><img src="img/brand/meizu-log.jpg" />魅族（MEIZU）</a>
							</li>
							<li>
								<a href="#" alt="5" title="vivo" rel="nofollow"><img src="img/brand/Vivo-logo.jpg" />vivo</a>
							</li>
							<li>
								<a href="#" alt="6" title="OPPO" rel="nofollow"><img src="img/brand/oppo-logo.jpg" />OPPO</a>
							</li>
							<li>
								<a href="#" alt="7" title="乐视（Letv）" rel="nofollow"><img src="img/brand/leshi-logo.jpg" />乐视（Letv）</a>
							</li>
							<li>
								<a href="#" alt="8" title="一加" rel="nofollow"><img src="img/brand/yijia-logo.jpg" />一加</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="J_selectorLine s-rom">
					<div class="fl flArea">
						<span>机身内存：</span>
					</div>
					<div class="fr frArea">
						<ul>
							<li>
								<a href="#" alt="5">128GB</a>
							</li>
							<li>
								<a href="#" alt="4">64GB</a>
							</li>
							<li>
								<a href="#" alt="3">32GB</a>
							</li>
							<li>
								<a href="#" alt="2">16GB</a>
							</li>
							<li>
								<a href="#" alt="1">8GB</a>
							</li>
							<li>
								<a href="#" alt="1">8GB以下</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="J_selectorLine s-ram">
					<div class="fl flArea">
						<span>运行内存：</span>
					</div>
					<div class="fr frArea">
						<ul>
							<li>
								<a href="#" alt="1">6GB</a>
							</li>
							<li>
								<a href="#" alt="2">4GB</a>
							</li>
							<li>
								<a href="#" alt="3">3GB</a>
							</li>
							<li>
								<a href="#" alt="4">2GB</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="J_selectorLine s-color">
					<div class="fl flArea">
						<span>颜色：</span>
					</div>
					<div class="fr frArea">
						<ul>
							<li>
								<a href="#" alt="1" title="黑色" class="black"><b></b></a>
							</li>
							<li>
								<a href="#" alt="2" title="灰色" class="light-gray"><b></b></a>
							</li>
							<li>
								<a href="#" alt="3" title="白色" class="white"><b></b></a>
							</li>
							<li>
								<a href="#" alt="4" title="粉色" class="pink"><b></b></a>
							</li>
							<li>
								<a href="#" alt="5" title="红色" class="red"><b></b></a>
							</li>
							<li>
								<a href="#" alt="6" title="玫瑰红" class="rose-red"><b></b></a>
							</li>
							<li>
								<a href="#" alt="7" title="紫色" class="purple"><b></b></a>
							</li>
							<li>
								<a href="#" alt="8" title="蓝色" class="blue"><b></b></a>
							</li>
							<li>
								<a href="#" alt="9" title="橙色" class="orange"><b></b></a>
							</li>
							<li>
								<a href="#" alt="10" title="黄色" class="yellow"><b></b></a>
							</li>
							<li>
								<a href="#" alt="11" title="棕色" class="brown"><b></b></a>
							</li>
							<li>
								<a href="#" alt="12" title="裸色" class="flesh-color"><b></b></a>
							</li>
						</ul>
					</div>
				</div>
				<div class="J_selectorLine s-size" style="border-bottom: 1px solid #DDD;">
					<div class="fl flArea">
						<span>屏幕尺寸：</span>
					</div>
					<div class="fr frArea">
						<ul>
							<li>
								<a href="#" alt="1">5.6英寸以上</a>
							</li>
							<li>
								<a href="#" alt="2">5.5-5.1英寸</a>
							</li>
							<li>
								<a href="#" alt="3">5.0-4.6英寸</a>
							</li>
							<li>
								<a href="#" alt="4">4.5-3.1英寸</a>
							</li>
						</ul>
					</div>
				</div>
		</div>
		
		<br /><br />
		
		<div class="m-list comWidth1">
			<div id="J-fliter" class="J-fliter">
				<div class="f-sort fl">
					<a class="" href="#" onclick=""><i></i>仅显示有货</a>
				</div>
				<div class="f-result-sum fr">
					共<span id="J_resCount" class="num">3275</span>件商品
				</div>
			</div>
			<div id="J-goodsList" class="J-goodslist">
				<ul>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good1.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good2.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good3.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good4.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good5.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good6.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good7.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good8.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good9.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good10.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good11.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good12.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good13.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good14.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
					<li>
						<div class="p-img">
							<a href="#" title="" ><img src="../img/goods/p-good15.jpg" /></a>
						</div>
						<div class="p-name">
							<a href="" title="荣耀8青春版 全网通 尊享版 4GB+64GB" >荣耀8青春版 全网通 尊享版 4GB+64GB</a>
						</div>
						<div class="p-p-c">
							<div class="p-price fl"><span>￥</span>1599.00</div>
							<div class="p-commit fr"><span class="">500</span>评论</div>
						</div>
						<div class="p-cart">
							<i class="p-cart-left"></i>
							<div class="p-cart-right"><a target="_blank" href="#" class="">加入购物车</a></div>
						</div>
					</li>
				</ul>
			</div>
			
			<br /><br />
			
			<div class="page clearfix">
				<h3>分页部分</h3>
			</div>
			
			
		</div>
			
			<br /><br />
			
			<div class="comWidth" >
				<img src="../img/foot.png" style="width: 1211px;"/>
			</div>
			
			<div class="footbar">
			      <div id="web_wj">
						<p>制作团队：ELEMENT TEAM</p>
						<p>
							Copyright &#169;2016-2017 <a title="数码商城" href="#">www.DM.com</a>
							All Rights Reserved <a title="船舶网" href="#">数码商城</a> 版权所有
						</p>
				</div>
			</div>
	</body>
</html>

